<!--
 * @Description: 徽标 组件
 * @Autor: codeBo
 * @Date: 2023-05-15 15:37:52
 * @LastEditors: gjzxlihaibo@163.com
 * @LastEditTime: 2023-05-16 16:21:36
-->
<template>
  <div class="badge" :style="{ 'justify-content': align }">
    <div class="wt_badge" :class="type" />
    <div>{{ title }}</div>
  </div>
</template>

<script>
/**
 * 徽标组件为状态显示前面的小圆点， el 不像 antd 组件库有自己封装好的，这里我们需要自己适配他的 justify-content 属性，默认 start 左对齐，如果需要居中的话 传入 center， 颜色色值 可自己通过 type 扩展
 */
export default {
  name: 'Badge',
  props: {
    title: {
      type: [String, Number],
      default: () => ''
    },
    type: {
      type: String,
      default: () => 'success'
    },
    align: {
      type: String,
      default: 'start'
    }
  }
}
</script>

<style lang="scss" scoped>
.badge {
  display: flex;
  align-items: center;
  width: 100%;

  div:last-child {
    padding-left: 5px;
  }
}

.wt_badge {
  width: 6px;
  height: 6px;
  vertical-align: middle;
  border-radius: 50%;
}

.wt_badge.default {
  background: #d9d9d9; /* 请替换为实际的颜色值 */
}

.wt_badge.success {
  background: #52c41a; /* 请替换为实际的颜色值 */
}

.wt_badge.primary {
  background: #1bb5f1; /* 请替换为实际的颜色值 */
}

.wt_badge.error {
  background: #f5222d; /* 请替换为实际的颜色值 */
}

.wt_badge.processing {
  background: #1890ff; /* 请替换为实际的颜色值 */
}

.wt_badge.warning {
  background: #faad14; /* 请替换为实际的颜色值 */
}
</style>

